<template>
    <div>
        <basic-container>
           <div class="content">
                <div class="content-left">
                    <el-form ref="formSearch"  size="small" >
                        <el-form-item >
                            <el-button size="small" @click.stop="handleAdd()" style="width:100%">添加监控</el-button>
                        </el-form-item> 
                        <el-form-item>
                            <el-input v-model="monitoringName" placeholder="请输入监控名称"><el-button slot="append" icon="el-icon-search" @click.prevent ="searchFormSubmit()"></el-button></el-input>
                        </el-form-item>
                    </el-form>
                    <div class="menu">
                        <el-menu default-active="0"  class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
                            <el-submenu index="0">
                                <template slot="title">
                                    <i class="el-icon-menu"></i><span>导航一</span>
                                </template>
                                <el-menu-item-group>
                                    <el-menu-item index="1-1" v-for='(v,i) in 20' :key='v'>
                                        <span class="item-name"> 选项1</span>
                                        <span>
                                            <el-button type="text" size="mini" @click.stop="handleEdit(v,i)">修改</el-button>
                                            <el-button type="text" size="mini" @click.stop="handleDelete(v, i)">删除</el-button>
                                        </span>
                                    </el-menu-item>
                                    <el-menu-item index="1-2">选项2</el-menu-item>
                                    <el-menu-item index="1-4">选项2</el-menu-item>
                                </el-menu-item-group>
                            </el-submenu>
                        </el-menu>
                    </div>
                </div>
               <div  class="content-right">
                   <div class="content-right-title">分类名字哈哈哈</div>
                   <!-- <video class="video" :poster="item.coverUrl" :src="item.videoUrl" preload="true" :ref="`video${item.id}`" muted></video> -->
                    <el-row :gutter="20" class="video-box" ref="div">
                        <el-col :span="6" :xs="24" :sm="24" :md="12" :lg="8" :xl="6" v-for="(item,index) in videoList" :key="index">
                            <div class="video-item" >
                                <!-- <template v-if="!item.pause">
                                    <img class="video" :src="item.coverUrl" alt="" />
                                    <div class="video-pause">
                                        <img src="../assets/img/play.png" alt="" title="播放" @click="videoClick(item.id,index)" />
                                    </div>
                                </template> -->
                                <!-- <rtmp v-else-if="item.pause" class="video" :key="item.videoUrl" :src="item.videoUrl" :poster="item.coverUrl" :autoplay="true" :ref="`video${item.id}`" :id="`video${item.id}`"></rtmp> -->
                                <video class="video" :poster="item.coverUrl" :src="item.videoUrl" preload="true" :ref="`video${item.id}`" muted></video>
                                
                                <div class="video-use">
                                    <span>删除</span>
                                    <span>修改</span>
                                </div>
                                <div class="video-title">名字{{item.deviceName}}</div>
                                <div class="video-bar" @click="goInfo(item)">
                                    <img src="../../assets/image/bog.png" alt=""/>
                                </div> 
                                <div class="video-time">
                                   2018.12.12 15:20:08
                                </div> 
                            </div>
                        </el-col>
                    </el-row>
               </div>  
            </div>
        </basic-container>
        <!-- 修改/新增-->
        <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" width="60%" class="diading" >
            <el-form ref="dialogForm"  :model="dialogForm" :rules="rules" size="mini"   label-position="left" label-width="110px"  >
               <el-row>
                    <el-col :span="13">
                        <el-form-item label="监控分类：" prop='type'>
                            <el-select v-model="dialogForm.type" placeholder="请选择" style="width:100%">
                                <el-option label="常温储存" :value="0"></el-option>
                                <el-option label="阴凉储存" :value="1"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="摄像头名称：" prop='name'>
                            <el-input v-model="dialogForm.name" placeholder=""></el-input>
                        </el-form-item>
                        <el-form-item label="安装地址：" prop='installAddress'>
                            <el-input v-model="dialogForm.installAddress" placeholder=""></el-input>
                        </el-form-item>
                        <el-form-item label="设备名称：" prop='deviceOrder'>
                            <el-input v-model="dialogForm.deviceOrder" placeholder=""></el-input>
                        </el-form-item>
                        <el-form-item label="设备名称：" prop='deviceName'>
                            <el-input v-model="dialogForm.deviceName" placeholder=""></el-input>
                        </el-form-item>
                        <el-form-item label="通道号：" prop='deviceSn'>
                            <el-input v-model="dialogForm.deviceSn" placeholder=""></el-input>
                        </el-form-item>
                        <el-form-item label="直播地址：" prop='address'>
                            <el-input v-model="dialogForm.address" placeholder=""></el-input>
                        </el-form-item>
                        <el-form-item label="设备状态：" prop='status'>
                            <el-radio-group v-model="dialogForm.status">
                                <el-radio  v-for='v in itemsStatus'  :key='v.id' :label="v.name" :value='v.id'></el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10" :offset="1">
                        <el-form-item label="" prop='info'>
                            <el-upload :action="actionUrl"  :headers="uploadHeaders" name="file" :show-file-list="false" accept="image/*"
                                :on-success="uploadSuccess" :on-error="uploadError"    class="avatar-uploader">
                                <img v-if="dialogForm.url" :src="dialogForm.url" class="avatar">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer" style="text-align:center">
                <el-button  size="small" @click="dialogFormVisible = false">关 闭</el-button>
                <el-button  size="small" type="primary" @click="handleAddLine('dialogForm')">确 认</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "sysManage",
        data() {
            return {
                monitoringName:'',//搜索监控名字
                itemsStatus:[//状态
                    {id:1,name:'启用'},
                    {id:2,name:'停用'},
                ],
                 // 修改/新增
                dialogTitle:'人员添加',
                dialogFormVisible:false,
                dialogForm:{},
                rules:{
                    name:[{required: true,message: '摄像头名称不能为空',trigger: 'blur'}],
                    type:[{required: true,message: '监控分类不能为空',trigger: 'change'}],
                    installAddress:[{required: true,message: '安装地址不能为空',trigger: 'blur'}],
                    deviceOrder:[{required: true,message: '设备序列号不能为空',trigger: 'blur'}],
                    deviceName:[{required: true,message: '设备名字不能为空',trigger: 'blur'}],
                    deviceSn:[{required: true,message: '通信号不能为空',trigger: 'blur'}],
                    address:[{required: true,message: '直播地址不能为空',trigger: 'blur'}],
                    status:[{required: true,message: '请选择系统状态',trigger: 'change'}],
                },
                // 上传图片
                actionUrl:'',
                // actionUrl: `${uploadUrl}/smart-community-property-consumer/consumer/file/upload`,
				uploadHeaders: {
					// Authorization: TOKEN
                },
                videoList:[{id:1,coverUrl:'22'},{id:1,coverUrl:'22'},{id:1,coverUrl:'22'},{id:1,coverUrl:'22'},{id:1,coverUrl:'22'},{id:1,coverUrl:'22'},{id:1,coverUrl:'22'},{id:1,coverUrl:'22'},{id:1,coverUrl:'22'},{id:1,coverUrl:'22'}]
            }
        },
        methods:{
            // 打开分类导航
            handleOpen(key, keyPath){
                console.log(key, keyPath);
            },
            // 关闭分类导航
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            // 点击添加
            handleAdd(){
                this.dialogFormVisible=true;
                this.dialogTitle='添加监控';
                this.dialogForm={
                    name:'',
                    type:'',
                    installAddress:'',
                    deviceOrder:'',
                    deviceName:'',
                    deviceSn:'',
                    address:'',
                    status:'',
                }
            },
            // 搜索
            searchFormSubmit(){

            },
            // 修改
            handleEdit(row,index){
                console.log(row,index)
                this.dialogFormVisible=true;
                this.dialogTitle='修改监控';
            },
            // 删除
            handleDelete(row,index){

            },
            // 确认新增/修改
            handleAddLine(formName){
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$refs[formName].resetFields();
                    }
                })
            },
             // 图片上传成功
			uploadSuccess(response, file) {
				if (response.code === 200) {
					// delete response.data.createTime;
					// this.dialogForm.imagesFiles[0] = response.data;
					// this.dialogForm.url=response.data.url;
					this.MS("图片上传成功");
				} else {
					this.$message.error(response.message);
				}
			},
			// 图片上传失败
			uploadError(err, file) {
				console.log(err)
            },
            // 播放视频--初始化tcplayer
            videoClick(id,index) {
                // this.videoList[index].pause = true;
            },
            // 视频详情
            goInfo(row) {
                // this.$router.push({ path: '/video_info'})
            },
        }
    }
</script>

<style>
.avatar-uploader{
    width: 100%;
    max-width: 345px;
    height: 100%;
    margin: auto
}
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
    
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100%;
    height: 345px;
    line-height: 345px;
    text-align: center;
}
.content-left .el-menu-item{
    display: flex;
    justify-content: space-between
}
.content-left .item-name{
    color:#303133
}
.avue-view,.basic-container,.el-card.is-always-shadow,.el-card__body,.el-card__body .content{
    height: 100%;
}
.el-card__body .content{
    display: flex;
    flex-direction: row;
}
.content-left{
    height: 100%;
    width: 24%;
    margin-right: 2%;
    border-right: 1px dotted #999;
    padding-right: 2%;
}

.content-left .menu{
    height: 80%;
}
.content-left .el-menu{
    height: 100%;
    overflow-y: auto;
}
.content-right{
    width: 72%;
   height: 100%;
   
}
.content-right-title{
    margin-bottom: 20px
}
    .video-box {
        display: flex;
        flex-wrap: wrap;
        /* padding: 20px -10px; */
        box-sizing: border-box;
        /* margin-left: 0px !important;
        margin-right: 0px !important; */
        height: 90%;
        overflow-y: auto;
    }
    .video-box .video-item {
        width: 100%;
        height: 222px;
        margin: 0px auto 10px auto;
        position: relative;
        padding: 3px;
        box-sizing: border-box;
        /* background-image: url("../assets/img/videoBorder.png"); */
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-color: #fff;
        border: 1px solid #333
        
    }
    .video-box .video {
        width: 100%;
        height: 100%;
        object-fit: fill;
    }
    .video-box .video-use {
        position: absolute;
        bottom: 0px;
        left: 5px;
        text-align: center;
        display: block;   
        font-size: 14px;
    }
    .video-box .video-use span{
        padding: 0 5px;
        line-height: 33px;
        cursor: pointer;
    }
    .video-box .video-title {
        position: absolute;
        top: 10px;
        left: 10px;
        max-width: 340px;
        word-break: break-all;
        font-size: 14px;
        z-index: 1;
    }
    .video-box .video-bar {
        position: absolute;
        z-index: 2;
        top: 10px;
        right: 10px;
        width: 20px;
        height: 20px;
        background:rgba(0,0,0,0.6);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }
    .video-box .video-bar img {
        width: 16px;
        height: 16px;
    }
   .video-box .video-item:hover {
        background-color: #d0d0d0;

    }
    .video-box .video-time{
        position: absolute;
        z-index: 2;
        bottom: 0px;
        right: 10px;
        font-size: 14px;
        line-height: 33px
    }

</style>